<template>
	<view class="you-container">
		<view class="you-header">
			<view class="you-title">已为你匹配{{mathData.users.length}}人：</view>
			<view class="you-header-kefu">
				<button type="default" class="you-header-kefu-b" style="
				    background-color: #ffffff;
				  " open-type="contact">
					<image :src="kefu_icon"></image>
					<view class="kefu-title">咨询客服</view>
				</button>
			</view>
		</view>
		<view class="you-header2" @click="changeYaoqiu()">
			<view class="you-header2-title">根据双方择偶要求匹配，准确率99.5%+。<span>修改择偶要求></span></view>
		</view>
		<view class="card-container" v-for="(userInfo,index) in mathData.users" :key="index">
			<image class="card-bg-img" :src="you_card_bg2" mode='scaleToFill'></image>
			<view class="card-left">
				<view class="new-time-container">
					<image v-if="showNew(userInfo.isNew)" :src="you_new_icon"></image>
					<view class="new-time-title" :class="{'new-time-title2':!showNew(userInfo.isNew)}">{{getTime(userInfo.created_time)}}</view>
				</view>
				<!-- 匹配人 -->
				<view class="people-container">
					<view class="people-item-container people-item-position1">
						<view class="avatar-mask">
							<image :src="meInfo.avatar" mode="aspectFill"></image>
						</view>
						<view class="people-name">{{userInfo.nick_name}}</view>
					</view>
					<view class="people-item-container" @click="toUserDetail(userInfo.user)">
						<view class="avatar-mask">
							<image :src="userInfo.user.avatar" mode="aspectFill"></image>
						</view>
						<view class="ta-people-name">{{userInfo.user.nick_name || ""}}</view>
					</view>
				</view>
				<!-- 详细标签 -->
				<view class="peopel-des-container">
					<view class="peopel-des-item" v-for="(item,index) in getPeopelDes(userInfo.user)" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="card-right">
				<image class="s_level_img" :src="you_pipei_3s"></image>
				<view class="pipei-value-container">
					<image :src="you_pipeizhi_bg"></image>
					<view class="pipei-value-title">双向匹配值：<span>{{getFateValue(userInfo.fate_value)}}</span></view>
				</view>
				<view v-if="!isFriend(userInfo)" class="liao-btn" @click="talkAction(userInfo.user)">
					立即开聊
				</view>
				<view v-if="isFriend(userInfo)" class="haoyou-btn">
					已成为好友
				</view>
				<!-- <button v-if="!isLogin" class="liao-btn" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">
					立即开聊
				</button> -->
			</view>
		</view>
		<view v-if="showVip()" class="vip-container" @click="vipClick()">
			<view class="vip-btn">
				开通VIP 加速脱单
			</view>
			<view class="vip-title">
				您的免费次数已用完
			</view>
		</view>
	</view>
</template>

<script>
	import {
		you_pipei_3s,
		you_pipeizhi_bg,
		you_new_icon,
		kefu_icon,
		you_card_bg2
	} from '../home_image_tool.js'

	import {
		greetSend
	} from "@/api/home/home.js";
	import moment from '@/util/moment/moment.js'
	export default {

		props: {
			mathData: Object,
			isLogin: false,
		},
		data() {
			return {
				meInfo: {},
				tempUsers: [],
				you_pipei_3s,
				you_pipeizhi_bg,
				you_new_icon,
				kefu_icon,
				you_card_bg2
			}
		},
		methods: {
			getPeopelDes(userInfo){
				var desArr = [];
				var birthday = userInfo.birthday || "";
				if (birthday != "") {
					var yearArr = birthday.split("-");
					var tempyear = yearArr[0];
					var year = tempyear.substr(tempyear.length-2,2);
					desArr.push(year + '年');
				}
				var job = userInfo.job || "";
				if (job != "") {
					desArr.push(job);
				}
				var height = userInfo.height || "";
				if (height != "") {
					desArr.push(height + 'cm');
				}
				var workType = userInfo.work_type || "";
				if (workType != "") {
					desArr.push(workType);
				}
				var salary = userInfo.salary || ""; 
				if (salary != "") {
					desArr.push(salary);
				}
				return desArr;
				//['99年','产品经历产','174cm','事业单位','8k-10k'];
			},
			changeYaoqiu(){
				uni.navigateTo({
					url: "/pageA/my-profile/dingzhi",
				});
			},
			vipClick(){
				uni.navigateTo({
					url: "/pageA/vip/vip",
				});
			},
			showNew(isNew){
				return isNew == true;
			},
			showVip(){
				let showVip = this.mathData.showVip || false;
				return showVip;
			},
			isFriend(userInfo) {
				if (userInfo.friend == true) {
					return true;
				}
				if (this.tempUsers.indexOf(userInfo.user.user_id) != -1) {
					return true
				}
				return false;
			},
			getFateValue(fateValue) {
				return (fateValue || "") + "%"
			},
			getTime(time) {
				return moment.parseZone(time).local().format('MM-DD hh:mm');
			},
			talkAction(userInfo) {
				// uni.showModal({
				// 	showCancel:false,
				// 	title: '温馨提示',
				// 	content: '恭喜小主，你们已成为好友，立即前往APP与ta畅聊',
				// 	confirmText:"去聊天",
				// 	success: function (res) {
				// 	   uni.navigateTo({
				// 		 url: "/pages/download/app_download/app_download",
				// 	   });
				// 	   // plus.runtime.openURL("https://sj.qq.com/appdetail/com.ketang.ketang_app"); 
				// 	}
				// });

				greetSend({
					"user_id": userInfo.user_id,
					"note": "恭喜你们匹配度很高哦，赶紧聊聊吧，万一成了呢",
					"auto": true
				}).then(res => {
					if (res.status == 1) {
						// uni.showToast({
						// 	icon: "none",
						// 	title: "恭喜小主，你们已成为好友，立即前往APP与ta畅聊"
						// });
						this.tempUsers.push(userInfo.user_id);
						uni.showModal({
							showCancel: false,
							title: '温馨提示',
							content: '恭喜小主，你们已成为好友，立即前往APP与ta畅聊',
							confirmText: "去聊天",
							success: function(res) {
								uni.navigateTo({
									url: "/pages/download/app_download/app_download",
								});
								// plus.runtime.openURL("https://sj.qq.com/appdetail/com.ketang.ketang_app"); 
							}
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.message || "招呼失败"
						});
					}
				});
			},
			decryptPhoneNumber(e) {
				this.$emit("decryptPhoneNumber", e);
			},
			toUserDetail(userinfo) {
				let url = "/pages/home2/detail2/detail2?user_id=" + userinfo.user_id;
				uni.navigateTo({
					url: url,
				});
			}
		},
		mounted() {
			this.meInfo = uni.getStorageSync("userInfo") || {};
		},
		computed: {


		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	button::after {
		border: 0; // 或者 border: none;
	}

	.you-container {
		flex-direction: column;

		.you-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px;

			.you-title {
				font-weight: 500;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #333333;
			}

			.you-header-kefu {
				display: flex;
				flex-direction: row;
				align-items: center;

				.you-header-kefu-b {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-right: 0;

					image {
						width: 22px;
						height: 22px;
					}

					.kefu-title {
						margin-left: 2px;
						color: #FF5E98;
						font-weight: 500;
						font-size: 26rpx;
						line-height: 36px;
					}
				}

			}

		}
		.you-header2{
			padding: 0 16px;
			margin: 5px 0;
			.you-header2-title{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 11px;
				line-height: 15px;
				color: #999999;
				span{
					color: #4A9EFF;
					font-weight: 500;
				}
			}
		}
		.card-container {
			display: flex;
			flex-direction: row;
			position: relative;
			background-color: white;
			margin-top: 10px;
			margin-left: 16px;
			height: 155px;
			width: calc(100% - 32px);
			box-shadow: 0px 0px 8px rgba(0, 26, 118, 0.09);
			border-radius: 6px;
			overflow: hidden;
			justify-content: space-between;

			.card-bg-img {
				position: absolute;
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				z-index: 0;
			}

			.card-left {
				position: relative;
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;

				.new-time-container {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					justify-content: flex-start;

					image {
						width: 37px;
						height: 19px;
					}

					.new-time-title {
						margin-left: 6px;
						font-weight: 400;
						font-size: 11px;
						line-height: 15px;
						letter-spacing: -0.3px;
						color: #999999
					}
					.new-time-title2{
						margin-top: 6px;
					}
				}

				.people-container {
					margin-top: 20px;
					margin-left: 16px;
					display: flex;
					flex-direction: row;
					position: relative;

					.people-item-container {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 54px;
						position: absolute;

						.avatar-mask {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 54px;
							height: 54px;
							border-radius: 27px;
							overflow: hidden;
							border: 2px solid white;

							image {
								width: 52px;
								height: 52px;
								border-radius: 26px;
							}
						}

						.people-name {
							margin-top: 3px;
							margin-left: 10rpx;
							font-weight: 400;
							font-size: 11px;
							line-height: 15px;
							letter-spacing: -0.3px;
							color: #333333;
							display: inline-block;
							white-space: nowrap; 
							width: 80%; 
							overflow: hidden;
							text-overflow:ellipsis;
							
						}
						.ta-people-name {
							margin-top: 3px;
							margin-right: 10rpx;
							font-weight: 400;
							font-size: 11px;
							line-height: 15px;
							letter-spacing: -0.3px;
							color: #333333;
							display: inline-block;
							white-space: nowrap; 
							width: 80%; 
							overflow: hidden;
							text-overflow:ellipsis;
						}
					}

					.people-item-position1 {
						left: 40px;
					}

				}
				
				.peopel-des-container{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					padding-left: 16px;
					position: absolute;
					top: 123px;
					.peopel-des-item{
						height: 14px;
						padding: 0 5px;
						margin-right: 2px;
						margin-bottom: 4px;
						border-radius: 7px;
						background-color: rgba(107, 107, 225, 0.5);
						
						font-weight: 400;
						font-size: 9px;
						line-height: 14px;
						/* identical to box height */
						letter-spacing: -0.3px;
						
						color: #FFFFFF;

					}
				}


			}

			.card-right {
				position: relative;
				width: 138px;
				height: 100%;
				padding-top: 7px;

				.s_level_img {
					width: 112px;
					height: 54px;
					margin-left: 4px;
				}

				.pipei-value-container {
					width: 138px;
					height: 21px;
					position: relative;

					image {
						position: absolute;
						width: 100%;
						height: 100%;
					}

					.pipei-value-title {
						position: relative;
						font-weight: 400;
						font-size: 13px;
						line-height: 21px;
						letter-spacing: -0.3px;

						color: #FFFFFF;
						margin-left: 15px;

						span {
							font-weight: 400;
							font-size: 17px;
						}
					}
				}

				.liao-btn {
					margin-left: 6px;
					margin-top: 8px;
					width: 76px;
					height: 28px;
					/* 主色 */
					background: linear-gradient(283.07deg, #FF5E6A 35.79%, #FF5E98 109.99%);
					border-radius: 14px;
					text-align: center;

					font-weight: 400;
					font-size: 14px;
					line-height: 28px;
					/* identical to box height */

					letter-spacing: -0.3px;

					color: #FFFFFF;

				}

				.haoyou-btn {
					margin-left: 6px;
					margin-top: 8px;
					width: 76px;
					height: 28px;
					/* 主色 */
					background: white;
					border-radius: 14px;
					text-align: center;

					font-weight: 400;
					font-size: 12px;
					line-height: 28px;
					letter-spacing: -0.3px;
					color: #FF5E98;
					border: #FF5E98 solid 1px;
				}

			}
		}

		.vip-container {
			margin: 60rpx 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.vip-btn {
				width: 187px;
				height: 48px;
				left: 94px;
				background: linear-gradient(283.07deg, #FF5E6A 35.79%, #FF5E98 109.99%);
				border-radius: 24px;
				text-align: center;

				font-weight: 600;
				font-size: 16px;
				line-height: 48px;
				letter-spacing: -0.3px;
				color: #FFFFFF;
			}

			.vip-title {
				margin-top: 10px;
				font-weight: 400;
				font-size: 13px;
				line-height: 18px;
				letter-spacing: -0.3px;
				color: #999999;
			}

		}
	}
</style>
